<template>
  <view class="article-content">
    <view class="top">
      <view class="title">{{ data.articleInfo.article_title }}</view>
      <view class="collect" @click="collect">
        <u-icon :name="isCollect?'star-fill':'star'"
                :color="isCollect?'#fcbd71':'#82848a'"></u-icon>
        {{ isCollect ? '取消收藏' : '收藏' }}
      </view>
    </view>
    <view class="time">{{ data.articleInfo.article_updated_at }}</view>
    <view :style="lock?'height:900rpx;overflow:hidden;position: relative;':''">
      <image class="image" :src="data.articleInfo.article_image.thumbnail_path_url"></image>
      <view v-html="data.articleInfo.article_content"></view>
      <view class="file-list m-t-32" v-if="data.articleInfo.article_file.length > 0 ">
        <view class="" style="padding-top: 32rpx;">附件</view>
        <view class="file-list-item flex" v-for="(item,index) in data.articleInfo.article_file" :key="index"
              @click="policyPreview(item)">
          <image src="../../static/images/file-paste_normal.png"></image>
          <view class="line-clamp-1">{{ item.org_name }}</view>
        </view>
      </view>
      <view class="lock" v-if="lock">
        <u-button type="warning" icon="lock" @click="toLock" :text="data.showMsg"></u-button>
      </view>
    </view>
    <u-modal :show="show" title="温馨提示" :content='data.showMsg' @cancel="show = false"
             @confirm="unlock" :showCancelButton='true' :confirmText="data.goMsg"></u-modal>
  </view>
</template>
<script setup>
import {
  policyPreview
} from "../../utils/article/fileRead";
import {
  recommendDetail, collectArticle
} from "../../api/module/article.js"
import {
  onLoad,onShow
} from "@dcloudio/uni-app";
import {
  ref,
  reactive
} from 'vue';

import {commonMemberInfo} from "../../api/module/mine";

const member = ref({});
const memberCertification = ref({});
const contractCount = ref({});

const show = ref(false);
const isCollect = ref(false); //是否收藏
const lock = ref(true); //是否加锁
const data = reactive({
  articleInfo: {
    article_image: {},
    article_file: [],
  },
  userInfo: '',
  showMsg: '登陆后可解锁',
  goMsg: '去登录'
})
//收藏
const collect = () => {
  //收藏接口...
  if (data.userInfo.length <= 0) {
    //用户未登录设置成未收藏状态
    uni.showToast({
      title: '请先登录',
      duration: 2000,
      icon: 'none'
    })
    uni.redirectTo({
      url: '/pages/alogin/index'
    })
    return;
  }
  console.log('模板信息', data.articleInfo.article_id);
  console.log('收藏操作', isCollect.value);
  let collectStatus = isCollect.value ? 2 : 1;
  collectArticle({
    article_id: data.articleInfo.article_id,
    status: collectStatus
  }).then(res => {
    let msg = isCollect.value ? '取消收藏' : '收藏成功';
    uni.showToast({
      title: msg,
      duration: 2000,
      icon: 'success'
    });
    isCollect.value = !isCollect.value
  })
}
//去解锁
const toLock = () => {
  show.value = true;
}
const unlock = () => {
  switch (data.articleInfo.article_permissions) {
    case 'login':
      uni.redirectTo({
        url: '/pages/alogin/index'
      })
      break;
    case 'face':
    case 'certification':
      uni.redirectTo({
        url: '/pages/my/person/Realname/index'
      })
      break;
    case 3:
      break;
    default :
      uni.redirectTo({
        url: '/pages/my/index'
      })
      break;
  }
  console.log('去解锁');
}
onLoad((options) => {
  //获取用户信息
  data.userInfo = uni.getStorageSync('userInfo')
  //判断用户是否为空

	if (data.userInfo != null && typeof (data.userInfo.id) != 'number') {
		console.log('用户未登录', data.userInfo.length);
		//用户未登录设置成未收藏状态

		isCollect.value = false;
	}
  recommendDetail({
    article_id: options.id
  }).then(res => {
    data.articleInfo = res
    //判断用户是否收藏模板
    isCollect.value = data.articleInfo.collect_status == 1 ? true : false;

    const permissions = ref(data.articleInfo.article_permissions);

	if (typeof (data.userInfo.id) == 'number' && data.userInfo.id > 0) {
		commonMemberInfo().then(response => {
			member.value = response.member;
			memberCertification.value = response.memberCertification;
			contractCount.value = response.contractCount;

			//判断模板解锁方式
			switch (permissions.value) {
				case 'certification':
					if (typeof (member.value.certification_status) != 'undefined' && member.value.certification_status == 1) {
						lock.value = false;
					}

				break;
			case 'face':
				if (typeof (memberCertification.value.face_status) != 'undefined' && memberCertification.value.face_status == 'SUCCESS') {
					lock.value = false;
				}
				break;
			case 'buy':

				if (typeof (contractCount.value.count) != 'undefined' && contractCount.value.count > 0) {
					lock.value = false;
				}
				break;
			case 'none':
				lock.value = false;
				break;
			case 'login':
				if (typeof (data.userInfo.id) == 'number') {
					lock.value = false;
				}
				break;
			default :
				lock.value = false;
				break;
			}

		});
	}


    //判断模板解锁方式
    switch (permissions.value) {
      case 'login':
		data.showMsg = "登陆后可解锁";
		data.goMsg = "去登录";
        break;
      case 'certification':
        data.showMsg = "实名认证后可解锁";
        data.goMsg = "去认证";
        break;
      case 'face':
        data.showMsg = "人脸识别后可解锁";
        data.goMsg = "去认证";
        break;
      case 3:
        data.showMsg = "仅对购买过合同用户开放";
        data.goMsg = "去购买";
        break;
      default :
        lock.value = false;
        break;

    }
  })
})
</script>
<style lang="scss" scoped>
.article-content {
  width: 100%;
  padding: 32rpx 40rpx;
  box-sizing: border-box;

  .lock {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 300rpx;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 1));

    :deep(button) {
      width: 80%;
      margin: 120rpx auto 0;
    }
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .collect {
      :deep(.u-icon__icon) {
        font-size: 38rpx !important;
        margin-right: 4rpx;
      }

      color: #82848a;
      display: flex;
      align-items: center;
      font-size: 26rpx;
    }
  }

  .file-list {
    padding-bottom: 24rpx;
    font-size: 32rpx;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }

    .file-list-item {
      padding-top: 24rpx;
      font-size: 26rpx;
      color: #4787F0;
    }
  }

  .title {
    font-size: 36rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    line-height: 50rpx;
  }

  .time {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    padding: 12rpx 0 34rpx;
    color: rgba(0, 0, 0, 0.6);
    border-bottom: 2rpx solid #F6F6F6;;
  }

  .image {
    width: 670rpx;
    height: 298rpx;
    margin-top: 38rpx;
    margin-bottom: 32rpx;
  }

  .view {
    font-size: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
    line-height: 40rpx;
  }
}
</style>
